@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.email-forward-verification-status {
	display: flex;
	align-items: center;
	gap: 5px;

	&.active {
		svg {
			fill: var(--studio-green-50);
		}

		// hide text on mobile.
		span {
			display: none;
		}

		@include break-large {
			span {
				display: inline-block;
			}
		}
	}

	&.verification-pending {
		color: var(--studio-orange-50);

		svg {
			fill: var(--studio-orange-50);
			display: none;
		}

		@include break-large {
			svg {
				display: flex;
			}
		}
	}
}
